﻿@page "/listview/call-history"

@using Syncfusion.Blazor.Lists;
@using Syncfusion.Blazor.Navigations;
@using BlazorDemos.Pages.Layouts.ListView;

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the call history application using ListView. Click the checklist to filter the data in contacts list. </p>
</SampleDescription>
<ActionDescription>
   <p>This sample filters out the data from ListView based on the data selected from the checklist. Here, ListView utilizes the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Lists.SfListView%601~Template.html'>Template</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Lists.SfListView%601~ShowIcon.html'>ShowIcon</a></code> properties to repesent the call history application. The Tab component is used in this sample for navigation purposes. </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="layoutWrapper">
        <div class="speaker">
            <div class="camera"></div>
        </div>
        <div class="layout">
            <div id="list-container">
                <div class="tabContainer">
                    <SfTab CssClass="tab">
                        <TabItems>
                            <TabItem>
                                <ChildContent>
                                    <TabHeader Text="All"></TabHeader>
                                </ChildContent>
                                <ContentTemplate>
                                    <SfListView CssClass="e-list-template all" DataSource="@CompleteHistory">
                                        <ListViewFieldSettings TValue="CallHistoryModel" Id="Id" Text="Text" GroupBy="Category"></ListViewFieldSettings>
                                        <ListViewTemplates TValue="CallHistoryModel">
                                            <Template>
                                                @{
                                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                                        <span class="e-avatar e-icon"></span>
                                                        <span class="e-list-item-header">@context.Text</span>
                                                        <span class="@context.Type e-list-content">
                                                            @context.Group, @context.Time
                                                        </span>
                                                    </div>
                                                }
                                            </Template>
                                        </ListViewTemplates>
                                    </SfListView>
                                </ContentTemplate>
                            </TabItem>
                            <TabItem>
                                <ChildContent>
                                    <TabHeader Text="Received"></TabHeader>
                                </ChildContent>
                                <ContentTemplate>
                                    <SfListView CssClass="e-list-template received" DataSource="@RecievedHistory">
                                        <ListViewFieldSettings TValue="CallHistoryModel" Id="Id" Text="Text" GroupBy="Category"></ListViewFieldSettings>
                                        <ListViewTemplates TValue="CallHistoryModel">
                                            <Template>
                                                @{
                                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                                        <span class="e-avatar e-icon"></span>
                                                        <span class="e-list-item-header">@context.Text</span>
                                                        <span class="@context.Type e-list-content">
                                                            @context.Group, @context.Time
                                                        </span>
                                                    </div>
                                                }
                                            </Template>
                                        </ListViewTemplates>
                                    </SfListView>
                                </ContentTemplate>
                            </TabItem>
                            <TabItem>
                                <ChildContent>
                                    <TabHeader Text="Missed"></TabHeader>
                                </ChildContent>
                                <ContentTemplate>
                                    <SfListView CssClass="e-list-template missed" DataSource="@MissedHistory">
                                        <ListViewFieldSettings TValue="CallHistoryModel" Id="Id" Text="Text" GroupBy="Category"></ListViewFieldSettings>
                                        <ListViewTemplates TValue="CallHistoryModel">
                                            <Template>
                                                @{
                                                    <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                                                        <span class="e-avatar e-icon"></span>
                                                        <span class="e-list-item-header">@context.Text</span>
                                                        <span class="@context.Type e-list-content">
                                                            @context.Group, @context.Time
                                                        </span>
                                                    </div>
                                                }
                                            </Template>
                                        </ListViewTemplates>
                                    </SfListView>
                                </ContentTemplate>
                            </TabItem>
                        </TabItems>
                    </SfTab>
                </div>
            </div>
        </div>
        <div class="outerButton"> </div>
    </div>
</div>

@code {
    List<CallHistoryModel> CompleteHistory = ListViewDataSource.CallHistories;
    List<CallHistoryModel> RecievedHistory = ListViewDataSource.GetReceivedData();
    List<CallHistoryModel> MissedHistory = ListViewDataSource.GetMissedData();
}
<style>

    /* Layout customization */

    .layoutWrapper {
        line-height: initial;
        border: 1px solid black;
        width: 285px;
        height: 505px;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 28px;
        position: relative;
    }

        .layoutWrapper .speaker {
            border: 1px solid black;
            border-radius: 5px;
            width: 33.33333333%;
            height: 5px;
            margin: 15px auto 0px auto;
            position: relative;
        }

        .layoutWrapper .outerButton {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            border-radius: 50%;
            position: absolute;
            bottom: calc(0% + 10px);
            left: calc(50% - 15px);
        }

        .layoutWrapper .camera {
            position: absolute;
            left: calc(-15% - 10px);
            top: -100%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid black;
        }

        .layoutWrapper .layout {
            border: 1px solid black;
            margin: 20px 13px 0px 13px;
        }

    .layout #list-container .e-list-item {
        cursor: pointer;
    }

    .layoutWrapper.e-device-layout {
        visibility: visible;
    }

    .e-visbile-layer {
        visibility: visible;
    }
    /* ListView customization */

    @@font-face {
        font-family: 'Phone Icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @@font-face {
        font-family: 'Call-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRoAAAEoAAAAVmNtYXDOHM5nAAABjAAAAEBnbHlmtaNmiAAAAdQAAAEkaGVhZBAo7yMAAADQAAAANmhoZWEHegNsAAAArAAAACRobXR4C9H/wgAAAYAAAAAMbG9jYQBIAJIAAAHMAAAACG1heHABDwA6AAABCAAAACBuYW1ltZtoBgAAAvgAAAJJcG9zdNgJzA8AAAVEAAAAWAABAAADUv9qAFoEAP/h//4D6gABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAvvVLOF8PPPUACwPoAAAAANafVTkAAAAA1p9VOf/h/+ED6gPrAAAACAACAAAAAAAAAAEAAAADAC4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAgNS/2oAWgPrAJYAAAABAAAAAAAABAAAAAPo/+ED6P/hAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucA5wL//wAA5wDnAv//AAAAAAABAAYABgAAAAEAAgAAAAAASACSAAL/4f/hA+oD6wAGACgAAAEnAyUnNyclDwEGEgAEPwE2NC8BJgciBg8BBiYnLgE/ATY0LwEmByIGAoldLAFSa5Zd/V8DUUp9AT4BU5JUFRVUGR0QHAxXXKZNUE4hSxUVVRgdDhoC913+rytrll5LBFGS/q7+wH9KVRg8FlUWAQwJTyBNUFClXVUYPBZXFwEJAAL/4f/hA+oD6wALAC0AAAEjFTMVMzUzNSM1IyUPAQYSAAQ/ATY0LwEmByIGDwEGJicuAT8BNjQvASYHIgYCmXp6S3p6S/3mA1FKfQE+AVOSVBUVVBkdEBwMV1ymTVBOIUsVFVUYHQ4aAsRLenpLepoEUZL+rv7Af0pVGDwWVRYBDAlPIE1QUKVdVRg8FlcXAQkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBDYWxsLWljb25zUmVndWxhckNhbGwtaWNvbnNDYWxsLWljb25zVmVyc2lvbiAxLjBDYWxsLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABDAGEAbABsAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAQwBhAGwAbAAtAGkAYwBvAG4AcwBDAGEAbABsAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABDAGEAbABsAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFHRlbGVwaG9uZS0tLWluY29taW5nF3RlbGVwaG9uZS0tLWFkZGNhbGwtLTAyAAA=) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
        padding: 5px 60px 5px 5px;
    }

    .e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
    .e-bigger.tailwind .layout #list-container .e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
        padding: 5px 5px 5px 50px;
    }

    .tailwind .layout #list-container .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge),
    .e-bigger.tailwind .layout #list-container .e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
        padding: 5px 50px 5px 5px;
    }

    .tailwind .layout #list-container .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
    .tailwind .layout #list-container .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
    .tailwind .layout #list-container .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
        margin: 0;
        top: 10px;
    }

    .e-bigger.tailwind .layout #list-container .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
    .e-bigger.tailwind .layout #list-container .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
    .e-bigger.tailwind .layout #list-container .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
        top: 8px;
    }


    .tailwind #list-container .e-tab .e-content .e-item {
        padding: 0px;
    }


    .layout #list-container .all.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
    .layout #list-container .received.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar,
    .layout #list-container .missed.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
        top: 5px;
        left: 5px;
    }

    .layout #list-container .all,
    .layout #list-container .received,
    .layout #list-container .missed {
        max-height: 360px;
    }

    .layout #list-container {
        height: 405px;
    }

    .layout #list-container .all {
        font-family: Call-icons;
    }

        .layout #list-container .received {
            font-family: Call-icons;
        }

            .layout #list-container .received.e-list-content:before {
                content: '\e700';
                font-size: 8px;
                margin-right: 6px;
            }

        .layout #list-container .missed {
            font-family: Call-icons;
        }

            .layout #list-container .missed.e-list-content:before {
                content: '\e702';
                font-size: 8px;
                margin-right: 6px;
            }

        .layout #list-container .e-icon {
            font-family: 'e-customized-icons';
            background: transparent;
            color: black;
        }

            .layout #list-container .e-icon:before {
                content: '\e902';
            }
    /* ListView theme customization */

    .highcontrast .layoutWrapper .layout,
    .highcontrast .layoutWrapper .camera,
    .highcontrast .layoutWrapper .outerButton,
    .highcontrast .layoutWrapper .speaker,
    .highcontrast .layoutWrapper {
        border-color: white;
    }

    .bootstrap4 .layout #list-container .e-listview .e-active .e-icon {
        color: #fff;
    }

    @@font-face {
        font-family: 'e-customized-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
</style>